<template>
  <div class="com-label-value">
    <div class="label">{{ label }}</div>
    <div class="value" :style="{'word-wrap': multiple ? 'break-word' : '' }">{{ value }}</div>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      default: ""
    },
    multiple: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
.com-label-value {
  flex: 1;
}
.label {
  color: #7f8fa4;
  font-size: 16px;
  overflow: hidden;
  margin-bottom: 6px;
}
.value {
  color: #354052;
  font-size: 16px;
  min-height: 20px;
  padding: 8px 14px;
  line-height: 20px;
  word-wrap: wrap;
  border: 1px solid rgba(223, 227, 233, 1);
  border-radius: 4px;
  overflow: hidden;
}
</style>
